<template>
  <div>
    <div class="box-top">
      <div class="search-container">
        <!-- 筛选条件 -->
        <el-select
          v-model="searchForm.dmlaiyuan"
          placeholder="请选择断面类型"
          style="width: 100%"
          filterable
        >
          <!-- 添加选项 -->
          <el-option label="国控断面" value="国控断面"></el-option>
          <el-option label="市控断面" value="市控断面"></el-option>
          <el-option label="区控断面" value="区控断面"></el-option>
          <!-- 可以根据你的需求添加更多选项 -->
        </el-select>

        <el-select
          v-model="searchForm.liuyu"
          placeholder="请选择所在流域"
          style="width: 100%"
          filterable
        >
          <!-- 添加流域选项 -->
          <el-option label="乌兰木伦河" value="乌兰木伦河"></el-option>
          <el-option label="黄河干流" value="黄河干流"></el-option>
          <el-option label="龙王沟" value="龙王沟"></el-option>
          <el-option label="黑岱沟" value="黑岱沟"></el-option>
          <el-option label="黄埔川" value="黄埔川"></el-option>
          <el-option label="孤山川" value="孤山川"></el-option>
          <el-option label="牸牛川" value="牸牛川"></el-option>
          <el-option label="无定河" value="无定河"></el-option>
          <el-option label="白河" value="白河"></el-option>
          <el-option label="都思兔河" value="都思兔河"></el-option>
          <el-option label="哈什拉川" value="哈什拉川"></el-option>
          <el-option label="罕台川" value="罕台川"></el-option>
          <el-option
            label="康巴什与伊旗左右岸"
            value="康巴什与伊旗左右岸"
          ></el-option>
          <el-option label="黑赖沟" value="黑赖沟"></el-option>
          <el-option label="西柳沟" value="西柳沟"></el-option>
          <el-option label="东柳沟" value="东柳沟"></el-option>
          <el-option label="呼斯太沟" value="呼斯太沟"></el-option>
          <el-option label="十里长川" value="十里长川"></el-option>
          <el-option label="清水川" value="清水川"></el-option>
          <el-option label="呼斯太河" value="呼斯太河"></el-option>
          <el-option label="大沟" value="大沟"></el-option>
          <el-option label="苏家沟" value="苏家沟"></el-option>
          <el-option label="毛不浪沟" value="毛不浪沟"></el-option>

          <el-option label="无" value="无"></el-option>
          <!-- 可以根据你的需求添加更多选项 -->
        </el-select>

        <el-input
          v-model="searchForm.dmmc"
          placeholder="请输入断面名称"
        ></el-input>
        <el-button type="primary" @click="handleSearch" style="margin-right: 0"
          >搜索</el-button
        >
        <el-button type="info" @click="handleClear">清空</el-button>
      </div>

      <!-- 新增按钮 -->
      <div>
        <el-button type="success" @click="handleAddPlant">新增</el-button>
      </div>
    </div>

    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      :data="pagedData"
      border
      style="width: 100%"
      size="medium"
      :max-height="height"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="60px" />
      <el-table-column prop="dmmc" label="断面名称" />

      <el-table-column prop="xzqhname" label="旗区名称" show-overflow-tooltip />
      <el-table-column prop="szmb" label="水质目标" show-overflow-tooltip />
      <el-table-column
        prop="dmlaiyuan"
        label="断面类型"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dmquanzhong"
        label="断面权重"
        show-overflow-tooltip
      />
      <!-- <el-table-column prop="jianceshijian" label="监测时间" /> -->
      <el-table-column prop="liuyu" label="所在流域" />
      <!-- <el-table-column
              prop="createtime"
              label="创建时间"
              show-overflow-tooltip
            /> -->

      <el-table-column prop="action" label="操作" width="170" align="center">
        <template slot-scope="scope">
          <!-- 操作按钮 -->
          <el-button type="primary" size="mini" @click="xiugai(scope.row)">
            修改
          </el-button>
          <el-button type="danger" size="mini" @click="deleteItem(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="bottom">
      <el-pagination
        :current-page="currentPage"
        background
        layout="total, prev, pager, next, jumper"
        :total="totalItems"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        hide-on-single-page
      />
    </div>
  </div>
</template>

<script>
import { MessageBox, Message } from "element-ui";
export default {
  name: "InterfaceManagement",
  data() {
    return {
      height: 300,
      loading: true,

      searchForm: {
        // 筛选条件的表单数据
        dmlaiyuan: "",
        liuyu: "",
        dmmc: "",
      },
      allData: [], // 所有数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据量
      totalItems: 0, // 总项目数
      formData: [
        {
          bz: null,
          createtime: null,
          dmlaiyuan: null,
          dmmc: null,
          dmquanzhong: null,
          id: null,
          jianceshijian: null,
          liuyu: null,
          szmb: null,
          szmbdm: null,
          xzqhcode: null,
          xzqhname: null,
        },
      ],
    };
  },
  computed: {
    // 计算分页后的数据
    pagedData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.allData.slice(startIndex, endIndex);
    },
  },

  created() {
    const height = window.innerHeight - 185;
    this.height = height;
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 调用 user.js 中的 getData 方法
      // console.log("登录信息", this.$store.state);

      this.$api
        .getUser()
        .then((response) => {
          if (response.data.code == 906) {
            // return  alert('token已过期')
            this.$router.push(`/login`);
          }

          console.log("数据", response.data.data.areacode);
          this.getData(response.data.data.areacode);
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
    getData(xzqh) {
      this.$api
        .getNDminfoByXzqh(xzqh)
        .then((response) => {
          console.log("拿到的数据", response);
          this.allData = response.data.data; // 保存所有数据
          this.totalItems = this.allData.length; // 设置总条数
          this.currentPage = 1; // 每次获取数据后重置当前页码为第一页
          this.formData = response.data.data;
        })
        .finally(() => {
          this.loading = false; // 请求完成后设置加载状态为 false
        });
    },
    handleSelectionChange(val) {
      this.selection = val;
    },

    handleSearch() {
      // 恢复为初始数据
      this.allData = this.formData.slice();

      // 如果搜索条件不为空，则进行搜索
      if (
        this.searchForm.dmlaiyuan ||
        this.searchForm.liuyu ||
        this.searchForm.dmmc
      ) {
        // 处理搜索逻辑，可以在这里根据筛选条件重新获取数据
        this.allData = this.allData.filter((item) => {
          let match = true;
          // 如果选中的选项不为空，则只搜索选中的选项
          if (
            this.searchForm.dmlaiyuan &&
            item.dmlaiyuan !== this.searchForm.dmlaiyuan
          ) {
            match = false;
          }
          if (this.searchForm.liuyu && item.liuyu !== this.searchForm.liuyu) {
            match = false;
          }
          if (
            this.searchForm.dmmc &&
            !item.dmmc.includes(this.searchForm.dmmc)
          ) {
            match = false;
          }
          return match;
        });
      }

      this.totalItems = this.allData.length; // 更新总项目数
      this.currentPage = 1; // 每次搜索后重置当前页码为第一页
      // 根据搜索结果重新计算分页后的数据
      // this.pagedData = this.allData.slice(0, this.pageSize);
      // const startIndex = (this.currentPage - 1) * this.pageSize;
      // const endIndex = startIndex + this.pageSize;
      // this.pagedData = this.allData.slice(startIndex, endIndex);
      console.log("搜索条件:", this.searchForm);
    },

    handleClear() {
      // 清空搜索条件
      this.searchForm = {
        dmlaiyuan: "",
        liuyu: "",
        dmmc: "",
      };
    },
    handleAddPlant() {
      console.log("点击了新增按钮");
      this.$router.push({ name: "InterfaceManagementAdd" });
    },
    xiugai(data) {
      // return
      this.$router.push({
        name: "InterfaceManagementAdd",
        query: { data: JSON.stringify(data) },
      });
    },
    deleteItem(id) {
      console.log("删除id", id);

      try {
        MessageBox.confirm("确定要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 用户点击了确定按钮
            console.log("用户点击了确定按钮");
            this.$api
              .deleteNDminfo(id)
              .then((response) => {
                // 处理接口返回的数据或其他逻辑

                // 处理删除成功的情况
                console.log("删除成功", response.data);
                this.allData = this.allData.filter((item) => item.id !== id);
                this.totalItems--; // 减少总项目数

                // 更新分页后的数据
                // 更新分页后的数据

                // 更新分页组件的总项目数和当前页码
                this.totalItems = this.allData.length;
                // 如果删除后当前页没有数据了，需要将当前页码减一
                if (this.pagedData.length === 0 && this.currentPage > 1) {
                  this.currentPage--;
                }
                //  重新获取数据
                // this.fetchData();
              })
              .catch((error) => {
                // 处理失败的情况
                console.error("失败:", error);
              });
          })
          .catch(() => {
            // 用户点击了取消按钮
            console.log("用户点击了取消按钮");
          });
      } catch (error) {
        // 处理删除失败的情况
        console.error("删除失败", error);
      }
    },

    handleCurrentChange(val) {
      // 当用户切换分页时触发
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
/* 这里可以添加针对 InterfaceManagement 页面的样式 */
.box-top {
  padding: 10px;
  background-color: rgb(232, 232, 232);
  overflow: hidden;
  text-align: center;
  /* margin-bottom: 10px; */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-container {
  display: flex;
  /* flex: 1;  */
}

.search-container > * {
  margin-right: 10px;
}

.bottom {
  text-align: right;
}
</style>
